<template>
  <div>
    <!-- 新碟上架轮播图开始 -->
    <div class="xdsj-wrap">
      <a href="javascript:;" class="left"></a>
      <div class="roll">
        <ul>
          <li v-if="newCd1">
            <div class="cover-img">
              <img :src="newCd1.picUrl" alt="" class="j-img" />
              <a href="javascript:;" class="mask"></a>
              <a href="javascript:;" class="icon-play" title="播放"></a>
              <p class="f-thide">
                <a href="javascript:;">{{ newCd1.name }}</a>
              </p>
              <p class="tit-thide">
                <a href="javascript:;">{{ newCd1.artist.name }}</a>
              </p>
            </div>
          </li>
          <li v-if="newCd2">
            <div class="cover-img">
              <img :src="newCd2.picUrl" alt="" class="j-img" />
              <a href="javascript:;" class="mask"></a>
              <a href="javascript:;" class="icon-play" title="播放"></a>
              <p class="f-thide">
                <a href="javascript:;">{{ newCd2.name }}</a>
              </p>
              <p class="tit-thide">
                <a href="javascript:;">{{ newCd2.artist.name }}</a>
              </p>
            </div>
          </li>
          <li v-if="newCd3">
            <div class="cover-img">
              <img :src="newCd3.picUrl" alt="" class="j-img" />
              <a href="javascript:;" class="mask"></a>
              <a href="javascript:;" class="icon-play" title="播放"></a>
              <p class="f-thide">
                <a href="javascript:;">{{ newCd3.name }}</a>
              </p>
              <p class="tit-thide">
                <a href="javascript:;">{{ newCd3.artist.name }}</a>
              </p>
            </div>
          </li>
          <li v-if="newCd4">
            <div class="cover-img">
              <img :src="newCd4.picUrl" alt="" class="j-img" />
              <a href="javascript:;" class="mask"></a>
              <a href="javascript:;" class="icon-play" title="播放"></a>
              <p class="f-thide">
                <a href="javascript:;">{{ newCd4.name }}</a>
              </p>
              <p class="tit-thide">
                <a href="javascript:;">{{ newCd4.artist.name }}</a>
              </p>
            </div>
          </li>
          <li v-if="newCd5">
            <div class="cover-img">
              <img :src="newCd5.picUrl" alt="" class="j-img" />
              <a href="javascript:;" class="mask"></a>
              <a href="javascript:;" class="icon-play" title="播放"></a>
              <p class="f-thide">
                <a href="javascript:;">{{ newCd5.name }}</a>
              </p>
              <p class="tit-thide">
                <a href="javascript:;">{{ newCd5.artist.name }}</a>
              </p>
            </div>
          </li>
        </ul>
      </div>
      <a href="javascript:;" class="right"></a>
    </div>
    <!-- 新碟上架轮播图结束 -->
  </div>
</template>

<script>
export default {
  mounted() {
    this.getNewCd1();
    this.getNewCd2();
    this.getNewCd3();
    this.getNewCd4();
    this.getNewCd5();
  },
  data() {
    return {
      newCd1: null,
      newCd2: null,
      newCd3: null,
      newCd4: null,
      newCd5: null,
    };
  },
  methods: {
    getNewCd1() {
      this.axios.get("/album?id=31322").then((res) => {
        this.newCd1 = res.data.album;
      });
    },
    getNewCd2() {
      this.axios.get("/album?id=31311").then((res) => {
        this.newCd2 = res.data.album;
      });
    },
    getNewCd3() {
      this.axios.get("/album?id=31341").then((res) => {
        this.newCd3 = res.data.album;
      });
    },
    getNewCd4() {
      this.axios.get("/album?id=31340").then((res) => {
        this.newCd4 = res.data.album;
      });
    },
    getNewCd5() {
      this.axios.get("/album?id=31333").then((res) => {
        this.newCd5 = res.data.album;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
/* 新碟上架轮播图 */
.xdsj-wrap .roll {
  width: 645px;
  height: 148px;
  margin: 20px auto 0 auto;
  position: relative;
}

.xdsj-wrap .roll ul {
  position: relative;
  left: 0;
  top: 0;
  width: 645px;
}

.xdsj-wrap .roll ul li {
  float: left;
  width: 118px;
  height: 148px;
  margin-left: 10px;
  overflow: hidden;
  background-image: url("../assets/images/index.png");
  background-repeat: no-repeat;
  background-position: -260px 100px;
}

.xdsj-wrap .cover-img {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0;
}

.xdsj-wrap .cover-img img {
  width: 100px;
  height: 100px;
}

.xdsj-wrap .mask {
  position: absolute;
  display: inline-block;
  width: 118px;
  height: 100px;
  top: 0;
  left: 0;
  background-image: url("../assets/images/coverall.png");
  background-position: 0px -570px;
  background-repeat: no-repeat;
  z-index: 5;
}

.xdsj-wrap .f-thide {
  margin-top: 7px;
  font-size: 12px;
  width: 90%;
  line-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}

.xdsj-wrap .f-thide a {
  color: #000;
}

.xdsj-wrap .tit-thide {
  font-size: 12px;
  width: 90%;
  line-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}

.xdsj-wrap .tit-thide a {
  color: #666666;
}
</style>